<div class="box" #boxEle>
  <button class="btn btn-success" (click)="insert(secondTpl)">insert template2</button>
  <button class="btn btn-primary" (click)="insert(thirdTpl)">insert template3</button>
  <button class="btn btn-secondary" (click)="insert(fourthTpl)">insert template4</button>
  <button class="btn btn-danger" (click)="insertFree()">insert free-template</button>
  <button class="btn btn-info" (click)="insertAll()">insert all template</button>
  <hr />
  <button class="btn btn-primary" (click)="getOne()">get one</button>
  <button class="btn btn-success" (click)="moveFree()">move free</button>
  <button class="btn btn-danger" (click)="exchange()">exchange position</button>
  <button class="btn btn-secondary" (click)="moveToOuter()">moveTo Outer</button>
</div>

<ng-template #firstTpl>
  <h1>hello</h1>
  <h2>Angular</h2>
</ng-template>
<ng-template #secondTpl>
  <h1>第二段ng-template</h1>
</ng-template>
<ng-template #thirdTpl>
  <h1>第三段ng-template</h1>
</ng-template>
<ng-template #fourthTpl>
  <h1>第四段ng-template</h1>
</ng-template>
<ng-template #freeTpl let-fr="free" let-def>
  <h1>这是一段自由的ng-template fr: {{fr}} -- def: {{def}}</h1>
</ng-template>

<section>
  first container:
  <ng-container #firstContainer></ng-container>
</section>
<hr />
<section>
  second container:
  <ng-container #secondContainer></ng-container>
</section>
